<template>
    <div class="performance-interview-record">
        <div class="header-actions">
            <router-link to="/main/renshi/jixiao"><el-button>返回绩效</el-button></router-link>
            <router-link to="/main/renshi/jixiao/jixiaojiluList"><el-button>列表</el-button></router-link>
            <!-- 添加导出和打印按钮 -->
            <el-button @click="exportToPDF">导出为 PDF</el-button>
            <!-- <el-button @click="printPage">打印</el-button> -->
        </div>
        <div class="daying">
            <h2 class="form-title">绩效面谈记录表</h2>
            <table class="info-table" border="1">
                <tr>
                    <td>考核者</td>
                    <td><input v-model="formData.appraiser" :disabled="isView" /></td>
                    <td>工 号</td>
                    <td><input v-model="formData.employeeId" :disabled="isView" /></td>
                    <td>职 务</td>
                    <td><input v-model="formData.position" :disabled="isView" /></td>
                </tr>
                <tr>
                    <td>任职部门</td>
                    <td><input v-model="formData.department" :disabled="isView" /></td>
                    <td>上级主管</td>
                    <td><input v-model="formData.superior" :disabled="isView" /></td>
                    <td>面谈时间</td>
                    <td><input v-model="formData.interviewTime" type="datetime-local" :disabled="isView" /></td>
                </tr>
                <tr>
                    <td>面谈类别</td>
                    <td colspan="5">
                        <input style="width: 10px" type="checkbox" v-model="formData.monthlyPlan" :disabled="isView" />
                        本月计划
                        <input style="width: 10px" type="checkbox" v-model="formData.lastMonthReview"
                            :disabled="isView" />
                        上月考核
                        <input style="width: 10px" type="checkbox" v-model="formData.bothType" :disabled="isView" />
                        本月计划/上月考核
                    </td>
                </tr>
            </table>
            <table class="record-table" border="1">
                <th style="text-align: center;" colspan="2">
                    面谈记录
                </th>
                <tr>
                    <td style="width: 20%;" rowspan="2">绩效目标制定面谈</td>
                    <td colspan="2">
                        <textarea v-model="formData.goalQuestion" style="height: 100px;" :disabled="isView"></textarea>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">面谈记录：<textarea v-model="formData.goalRecord" style="height: 100px;"
                            :disabled="isView"></textarea></td>
                </tr>
                <tr>
                    <td rowspan="2">实施辅导面谈</td>
                    <td colspan="2">
                        <textarea v-model="formData.coachingQuestion" style="height: 100px;"
                            :disabled="isView"></textarea>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">面谈记录：<textarea v-model="formData.coachingRecord" style="height: 100px;"
                            :disabled="isView"></textarea></td>
                </tr>
                <tr>
                    <td rowspan="2">绩效考评总结面谈</td>
                    <td colspan="2">
                        <textarea v-model="formData.evaluationQuestion" style="height: 100px;"
                            :disabled="isView"></textarea>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">面谈记录：<textarea v-model="formData.evaluationRecord" style="height: 100px;"
                            :disabled="isView"></textarea></td>
                </tr>
                <tr>
                    <td>双方确认</td>
                    <td colspan="2"><textarea v-model="formData.mutualConfirmation" style="height: 50px;"
                            :disabled="isView"></textarea></td>
                </tr>
            </table>
            <p class="form-info"><span>表单编号及版本：AM-JY-244 A/1</span> <span>保存期限：长期</span></p>
        </div>
        <el-button v-if="!isView" type="primary" @click="saveData" class="save-button">保存</el-button>
    </div>
</template>

<script>
import { savePerformanceInterview, getPerformanceInterviewDetail } from '@/api/performanceInterview'
import { formatDate, formatDateTime } from '@/utils/date'
// 引入 jsPDF 和 html2canvas 用于导出 PDF
import jsPDF from 'jspdf'
import html2canvas from 'html2canvas'

export default {
    data() {
        return {
            isView: false,
            formData: {
                id: null,
                appraiser: '',
                employeeId: '',
                position: '',
                department: '',
                superior: '',
                interviewTime: '',
                monthlyPlan: false,
                lastMonthReview: false,
                bothType: false,
                goalQuestion: '你制定的目标有哪几个是支撑你上级的，自己在挑战自己岗位设了哪几个指标，这些指标的设定你和上级是否达成共识？',
                goalRecord: '',
                coachingQuestion: '为达成你设定的指标你采取了那些具体的措施，在实施过程中你所需的资源是否充足？',
                coachingRecord: '',
                evaluationQuestion: '本月目标的达成情况总结，对未达成的指标你下月将采取什么措施进行改进并达成？',
                evaluationRecord: '',
                mutualConfirmation: ''
            }
        };
    },
    async created() {
        const { id, mode } = this.$route.query
        this.isView = mode === 'view'

        if (id) {
            await this.fetchDetail(id)
        }
    },
    methods: {
        async fetchDetail(id) {
            try {
                const response = await getPerformanceInterviewDetail(id)
                this.formData = response.data
                if (this.formData.interviewTime) {
                    this.formData.interviewTime = formatDateTime(this.formData.interviewTime)
                }
            } catch (error) {
                this.$message.error('获取详情失败：' + error.message)
            }
        },
        async saveData() {
            try {
                if (!this.formData.appraiser) throw new Error('请填写考核者')
                if (!this.formData.employeeId) throw new Error('请填写工号')
                if (!this.formData.interviewTime) throw new Error('请选择面谈时间')
                this.formData.interviewTime = formatDateTime(this.formData.interviewTime)
                await savePerformanceInterview(this.formData)
                this.$message.success('保存成功')
                this.$router.push('/main/renshi/jixiao/jixiaojiluList')
            } catch (error) {
                this.$message.error('保存失败：' + error.message)
            }
        },
        // 导出为 PDF 函数
        async exportToPDF() {
            const element = document.querySelector('.daying');
            
            const canvas = await html2canvas(element);
            const imgData = canvas.toDataURL('image/png');
            const pdf = new jsPDF();
            const imgProps = pdf.getImageProperties(imgData);
            const pdfWidth = pdf.internal.pageSize.getWidth();
            const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
            pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
            pdf.save('绩效面谈记录表.pdf');
        },
        // // 打印页面函数
        // printPage() {
        //     window.print();
        // }
    }
};
</script>

<style lang="scss" scoped>
.performance-interview-record {
  padding: 16px;
  // background-color: #f5f7fa;
  min-height: calc(100vh - 32px);
  width: 1200px;
  margin: 0 auto;

  .header-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;

    .el-button {
      padding: 8px 16px;
      height: 32px;
      font-size: 14px;
      transition: all 0.3s ease;
      
      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }
    }
  }

  .daying {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    margin-bottom: 16px;
    position: relative;
    transition: all 0.3s ease;

    &:hover {
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    }

    .form-title {
      text-align: center;
      color: #2c3e50;
      margin-bottom: 24px;
      font-size: 20px;
      font-weight: 600;
      position: relative;
      padding-bottom: 12px;

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 3px;
        background: linear-gradient(90deg, #409EFF, #53a8ff);
        border-radius: 3px;
      }
    }

    .info-table {
      margin-bottom: 24px;
      border-radius: 4px;
      overflow: hidden;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    }

    .info-table,
    .record-table {
      border-collapse: collapse;
      width: 100%;
      background: #fff;
      font-size: 14px;

      th,
      td {
        border: 1px solid #ebeef5;
        padding: 10px;
        text-align: center;
        height: 40px;
        vertical-align: middle;
        color: #606266;
        transition: background-color 0.3s ease;

        &:first-child {
          background-color: #f5f7fa;
          font-weight: 500;
          width: 120px;
          color: #2c3e50;
        }

        &:hover {
          background-color: #fafafa;
        }
      }

      th {
        background-color: #f5f7fa;
        font-weight: 500;
        color: #2c3e50;
      }

      input[type="checkbox"] {
        width: 16px;
        height: 16px;
        margin: 0 6px;
        vertical-align: middle;
        cursor: pointer;
        position: relative;
        top: -1px;

        &:disabled {
          cursor: not-allowed;
        }
      }

      input:not([type="checkbox"]) {
        width: 90%;
        height: 32px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        padding: 0 12px;
        font-size: 14px;
        color: #606266;
        transition: all 0.3s ease;
        
        &:hover {
          border-color: #c0c4cc;
        }
        
        &:focus {
          border-color: #409EFF;
          outline: none;
          box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
        }
        
        &[disabled] {
          background-color: #f5f7fa;
          border-color: #e4e7ed;
          color: #909399;
          cursor: not-allowed;
        }

        &[type="datetime-local"] {
          padding: 0 8px;
        }
      }

      textarea {
        width: calc(100% - 24px);
        resize: none;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        padding: 12px;
        font-size: 14px;
        font-family: inherit;
        line-height: 1.6;
        color: #606266;
        margin: 6px 0;
        transition: all 0.3s ease;
        
        &:hover {
          border-color: #c0c4cc;
        }
        
        &:focus {
          border-color: #409EFF;
          outline: none;
          box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
        }
        
        &[disabled] {
          background-color: #f5f7fa;
          border-color: #e4e7ed;
          color: #909399;
          cursor: not-allowed;
        }
      }
    }

    .record-table {
      border-radius: 4px;
      overflow: hidden;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    }

    .form-info {
      display: flex;
      justify-content: space-between;
      padding: 16px 0 0;
      color: #909399;
      font-size: 13px;
      border-top: 1px solid #ebeef5;
      margin-top: 24px;
    }
  }

  .save-button {
    display: block;
    width: 200px;
    height: 40px;
    margin: 0 auto;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    border-radius: 20px;
    
    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
    }
  }
}

@media screen and (max-width: 768px) {
  .performance-interview-record {
    padding: 12px;

    .daying {
      padding: 16px;

      .form-title {
        font-size: 18px;
        margin-bottom: 20px;
        padding-bottom: 10px;

        &::after {
          width: 40px;
        }
      }

      .info-table,
      .record-table {
        th,
        td {
          padding: 8px;
          font-size: 13px;

          &:first-child {
            width: 90px;
          }
        }

        textarea {
          padding: 8px;
        }

        input:not([type="checkbox"]) {
          height: 30px;
          padding: 0 8px;
        }
      }
    }

    .save-button {
      width: 100%;
      height: 36px;
      border-radius: 18px;
    }
  }
}
</style>